<template>
  <div class="container">
    <div class="userInfo">
      <img :src="userInfo.avatarUrl" class="user-img">
      <div class="nickName">{{userInfo.nickName}}</div>
    </div>

    <!-- 图标导航-订单系列 -->
    <div class="icon-order-wrap">
      <div class="icon-item" @click="forpayment">
        <img src="../../../static/images/icon_forpayment.png" >
        <div class="icon-title">待付款</div>
      </div>
      <div class="icon-item" @click="pendingShipment">
        <img src="../../../static/images/icon_pending_shipment.png" >
        <div class="icon-title">待发货</div>
      </div>
      <div class="icon-item" @click="forgoods">
        <img src="../../../static/images/icon_forgoods.png" >
        <div class="icon-title">待收货</div>
      </div>
      <div class="icon-item" @click="goodscomplete">
        <img src="../../../static/images/icon_goodscomplete.png" >
        <div class="icon-title">全部订单</div>
      </div>
    </div>

    <!-- wux里面的list组件 -->
    <div class="user-list">
      <!-- 自定义前缀 -->
      <wux-cell-group wux-class="group-wrap"
        prefixCls="user"
      >
        <wux-cell
          class="user-list-box"
          thumb="/static/images/icon_user_order.png"
          title="我的订单" is-link extra="查看全部订单"
          @click="toUserOrder"
        />

        <!-- 传入backPage是回退页面，flag是检测参数必写（否则自动跳回主页） -->
        <wux-cell
          class="user-list-box"
          thumb="/static/images/icon_user_address.png"
          title="收货地址" is-link
          url="/pages/address/main?backPage=user&flag=false"
        />

        <wux-cell
          class="user-list-box"
          thumb="/static/images/icon_user_customerService.png"
          title="联系客服" is-link open-type="contact"
        />

        <wux-cell
          class="user-list-box"
          thumb="/static/images/icon_user_about.png"
          title="关于我们" is-link url="/pages/index/main" open-type="switchTab"
        />

        <wux-cell
          class="user-list-box"
          thumb="/static/images/icon_user_invitation.png"
          title="邀请好友" is-link open-type="share"
        />
      </wux-cell-group>
    </div>
  </div>
</template>

<script>
// import store from '@/utils/store' // 全局状态管理
import { getStorageSync, bindViewTap, getUserSetting } from '@/utils'

export default {
  components: {
  },
  data () {
    return {
      userInfo: {
        country: '', // 用户的国家
        city: '', // 用户的城市
        province: '', // 用户的省份
        avatarUrl: '', // 用户的头像图片
        nickName: '', // 用户的网名
        gender: '' // 用户性别 0：未知、1：男、2：女
      }
    }
  },
  // 自定义函数
  methods: {
    // 查看全部订单
    toUserOrder (e) {
      console.log('onContact', e)
      // TODO: 进入我的订单页面，需要传入用户ID、token给下一页面使用，用于读取接口验证
      bindViewTap('../userOrder/main', true)
    },
    // 待付款按钮
    forpayment (e) {
      console.log('待付款按钮', e)
      bindViewTap('../userOrder/main?orderType=0', true)
    },
    // 待发货按钮
    pendingShipment (e) {
      console.log('待发货按钮', e)
      bindViewTap('../userOrder/main?orderType=1', true)
    },
    // 待收货按钮
    forgoods (e) {
      console.log('待收货按钮', e)
      bindViewTap('../userOrder/main?orderType=2', true)
    },
    // 全部订单按钮
    goodscomplete (e) {
      console.log('全部订单按钮', e)
      this.toUserOrder()
    }
  },
  // 每次页面显示的时候都检测一下是否登陆，微信原生生命周期
  onShow () {
    // 一进来看看用户是否授权过
    getUserSetting()
  },
  // 页面载入完DOM后触发
  mounted () {
    // 读取缓存中的用户数据
    this.userInfo = getStorageSync('userInfo')
    console.log(this.userInfo)
  },
  // 用户点击右上角分享
  onShareAppMessage: function (res) {
    // TODO: 设置标题，以及存一份分享的图片
    return {
      title: '每一分钱都值得',
      path: '/pages/index/main',
      imageUrl: 'https://www.fybqq.com/wp-content/uploads/2019/04/list.jpg'
    }
  }
}
</script>

<style>
/* page全局是黑色，包裹内色用灰黑 */
.container {
  font-size: 32rpx;
  background: #46474C;
}
/* 头像图片 */
.userInfo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #000;
  padding-bottom: 20rpx;
}
.user-img {
  margin: 25rpx 0;
  width: 162rpx;
  height: 162rpx;
  border-radius: 50%;
}

/* icon订单系列 */
.icon-order-wrap {
  display: flex;
  margin: 7rpx 0;
  padding: 20rpx 24rpx 30rpx 24rpx;
  justify-content: center;
  align-items: center;
  background: #000;
  /* border: 1px solid #fff; */
}
.icon-item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  /* 垂直 */
  flex-direction: column;
  text-align: center;
}
.icon-item img {
  width: 60rpx;
  height: 60rpx;
}
.icon-item .icon-title {
  margin-top: 12rpx;
}
/* 列表菜单区域 */
.group-wrap {
  background: #000;
}
/* .user-list {
  margin-top: 55rpx;
} */
.user-list-box {
  line-height: 60rpx;
}
/* 左边文字样式 */
.wux-cell__text {
  box-sizing: border-box;
  padding-left: 16rpx;
}
/* 右边字体样式 */
.wux-cell__ft {
  font-size: 24rpx;
}
</style>
